var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "maishu-ui-toolkit", "maishu-services-sdk", "mobile/services/shoppingCartService", "components/common/component", "mobile/services/shoppingService", "react", "components/common/spiner-component", "common"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const maishu_ui_toolkit_1 = require("maishu-ui-toolkit");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const shoppingCartService_1 = require("mobile/services/shoppingCartService");
    const component_1 = require("components/common/component");
    const shoppingService_1 = require("mobile/services/shoppingService");
    const React = require("react");
    const spiner_component_1 = require("components/common/spiner-component");
    const common_1 = require("common");
    let SingleColunmProducts = class SingleColunmProducts extends spiner_component_1.SpinerComponent {
        constructor(props) {
            super(props);
            this.state = { products: [], shoppingCartItems: [], categories: [] };
            this.imageService = this.createService(maishu_services_sdk_1.ImageService);
            this.shoppingCartService = this.createService(shoppingCartService_1.ShoppingCartService);
            this.shopService = this.createService(shoppingService_1.ShoppingService);
        }
        imageUrl(imageId) {
            if (!imageId)
                return;
            if (imageId.startsWith("http://"))
                return imageId;
            return this.imageService.imageSource(imageId, 120, 120);
        }
        UNSAFE_componentWillReceiveProps(props) {
            return __awaiter(this, void 0, void 0, function* () {
                if (props.productsCount != this.props.productsCount) {
                    let products = yield this.shopService.products(props.productsCount);
                    this.setState({ products });
                }
            });
        }
        componentDidMount() {
            return __awaiter(this, void 0, void 0, function* () {
                // let products = await this.shopService.products(0);
                common_1.subscribe(this, shoppingCartService_1.ShoppingCartService.items, (items) => {
                    this.setState({ shoppingCartItems: items });
                });
                // this.setState({ products });
            });
        }
        loadData() {
            return __awaiter(this, void 0, void 0, function* () {
                let { categoryId, productsCount, productIds } = this.props;
                let sourceType = this.props.productSourceType;
                let products;
                if (sourceType == 'category') {
                    products = yield this.shopService.productsByCategory(productsCount, categoryId);
                }
                else if (sourceType == 'custom') {
                    products = productIds ? yield this.shopService.productsByIds(productIds) : [];
                }
                else {
                    products = yield this.shopService.products(productsCount);
                }
                let [categories] = yield Promise.all([
                    this.shopService.categories(),
                ]);
                if (products == null || products.length == 0)
                    return "暂无所要显示的商品";
                return { products, categories };
            });
        }
        render() {
            let { imageSize, productNameLines, showCategories } = this.props;
            let { categories, products, shoppingCartItems } = this.state;
            let leftClassName, rightClassName;
            switch (imageSize) {
                case 'small':
                default:
                    leftClassName = 'col-xs-3';
                    rightClassName = 'col-xs-9';
                    break;
                case 'medium':
                    leftClassName = 'col-xs-4';
                    rightClassName = 'col-xs-8';
                    break;
                case 'large':
                    leftClassName = 'col-xs-5';
                    rightClassName = 'col-xs-7';
                    break;
            }
            let titleClassName = productNameLines == 'singleLine' ? 'name single-line' : 'name double-line';
            return React.createElement("div", { className: "single-colunm-products" },
                showCategories ? React.createElement("ul", { className: "categories list-group pull-left" }, categories.map(o => React.createElement("li", { key: o.Id, className: "list-group-item" }, o.Name))) : null,
                React.createElement("div", { className: showCategories ? "product-list pull-right" : "" }, products.map((p, i) => {
                    let item = shoppingCartItems.filter(o => o.ProductId == p.Id)[0];
                    let itemCount = item ? item.Count : 0;
                    return React.createElement(React.Fragment, { key: p.Id },
                        React.createElement("div", { key: p.Id, className: "product single clearfix" },
                            React.createElement("div", { className: leftClassName, style: { padding: 0 }, onClick: () => this.app.forward("home/product", { id: p.Id }) },
                                React.createElement("img", { key: p.Id, className: "product-image", src: this.imageUrl(p.ImagePath), "data-url": p.ImagePath, ref: e => e ? maishu_ui_toolkit_1.renderImage(e, { imageSize: { width: 120, height: 120 } }) : null })),
                            React.createElement("div", { className: rightClassName },
                                React.createElement("div", { className: `${titleClassName} btn-link`, "product-id": p.Id }, p.Name),
                                React.createElement("div", { className: "price-bar" },
                                    React.createElement("span", { className: "pull-left price-color" },
                                        "\uFFE5",
                                        p.Price),
                                    React.createElement("div", { className: "pull-right" },
                                        React.createElement(ProductNumberButton, { shoppingCartService: this.shoppingCartService, product: p, count: itemCount }))))),
                        i < products.length - 1 ? React.createElement("hr", { style: {} }) : null);
                })));
        }
    };
    SingleColunmProducts.defaultProps = {
        imageSize: "small", productNameLines: "singleLine", productSourceType: "all",
        productsCount: 1, showCategories: true,
    };
    SingleColunmProducts = __decorate([
        component_1.component({ displayName: "单列商品", icon: "icon-list", introduce: "单列展示商品" })
    ], SingleColunmProducts);
    exports.SingleColunmProducts = SingleColunmProducts;
    class ProductNumberButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = { count: this.props.count };
            this.props.shoppingCartService.onChanged(this, (items) => {
                let shoppingCartItem = items.filter(o => o.ProductId == this.props.product.Id)[0];
                if (shoppingCartItem) {
                    this.setState({ count: shoppingCartItem.Count });
                }
                else {
                    this.setState({ count: 0 });
                }
            });
        }
        decreaseProductCount() {
            let { count } = this.state;
            if (count <= 0)
                return;
            count = count - 1;
            this.setState({ count });
            return this.props.shoppingCartService.setItemCount(this.props.product, count);
        }
        increaseProductCount() {
            let { count } = this.state;
            count = count + 1;
            this.setState({ count });
            return this.props.shoppingCartService.setItemCount(this.props.product, count);
        }
        static getDerivedStateFromProps(props) {
            return { count: props.count };
        }
        render() {
            let { count } = this.state;
            return React.createElement("div", { className: "buy-button icon-style input-group pull-right" },
                React.createElement("span", { className: "input-group-addon", onClick: () => this.decreaseProductCount() },
                    React.createElement("i", { className: "icon-minus" })),
                React.createElement("input", { type: "number", min: 1, className: "form-control", value: count, style: { padding: 0, textAlign: "center" }, onChange: e => {
                        let count = Number.parseInt(e.target.value);
                        if (!isNaN(count) && count > 0) {
                            this.setState({ count });
                        }
                    } }),
                React.createElement("span", { className: "input-group-addon", onClick: () => this.increaseProductCount() },
                    React.createElement("i", { className: "icon-plus" })));
        }
    }
});
